<!--
 * @Author: your name
 * @Date: 2020-12-31 14:59:41
 * @LastEditTime: 2020-12-31 15:11:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicvue\vuehtml\v-other.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="../index.html" class="retu">BACK</a>
    <h1>Component标签</h1>
    <component v-bind:is="who"></component>
    <button @click="changeComponent">changeComponent</button>
</div>
<script>
    var componentA = {
        template:`<div style="color: red">我是A组件</div>`
    };
    var componentB = {
        template:`<div style="color: green">我是B组件</div>`
    };
    var componentC = {
        template:`<div style="color: blue">我是C组件</div>`
    };

    let app = new Vue({
        el : '#app',
        data:{
            who:"componentC"
        },
        components:{
            "componentA" : componentA,
            "componentB" : componentB,
            "componentC" : componentC
        },
        methods:{
            changeComponent:function () {
                if(this.who == 'componentA'){
                    this.who = 'componentB';
                }else if(this.who == 'componentB'){
                    this.who = 'componentC';
                }else{
                    this.who = 'componentA';
                }
            }
        }
    });
</script>
</body>
</html>